<template>
	<view class="all">
		<view class="top">
			<text class="top-text" v-if="time">直播•今日{{time.debut_time}}</text>
			<swiper v-if="info.today" @change="swiperChange" style="height: 180rpx;" :duration="500" :current='current1'
				autoplay circular>
				<swiper-item v-for="(item,index) in info.today">
					<view class="body">
						<image class='imgall' :src="item.logo_image" />
						<view class="text">
							<view class="text_1">{{item.name}}</view>
							<view class="text_2">{{item.synopsis}}</view>
							<view class="text_3">
								<view class="" style="position: relative;bottom: -10px;">
									<text>{{item.study}}</text> <text
										style='font-weight: 600; color: black;'>人已预约</text>
								</view>
								<image @click="submit(item)" :src="require('@/static/img/4804.png')" />
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<!-- 	<view class="body">
				<image class='imgall' :src="item.logo_image" />
				<view class="text">
					<view class="text_1">{{item.name}}</view>
					<view class="text_2">{{item.synopsis}}</view>
					<view class="text_3">
						<view class="" style="position: relative;bottom: -10px;">
							<text>{{item.study}}</text> <text style='font-weight: 600; color: black;'>人已预约</text>
						</view>
						<image @click="submit()" :src="require('@/static/img/4804.png')" />
					</view>
				</view>
			</view> -->
			<!-- <view class="xian2" v-if="index!=info.today.length-1"> 		</view> -->
		</view>
		<view class="top two">
			<view class="utabs">
				<u-tabs :list="list" active-color='#131314' :is-scroll="false" :current="current" @change="change">
				</u-tabs>
			</view>
			<view style="margin-top: 20rpx;"></view>
			<view @click="submit(item)" v-for="(item,index) in info.list.data">
				<zb :data='item' :type='form.type' />
				<view class="xian2" v-if="index!=info.list.data.length-1" />
			</view>
			<!-- 	<view v-for="item in 6">
				<view class="body">
					<image class='imgall' src="../../static/img/4608.png" mode=""></image>
					<view class="text">
						<view class="text_1">如何让你的课堂气氛更氛更 如何让你的课堂气氛更氛更 如何让你的课堂气氛更氛更</view>
						<view class="text_2">幽默让学生更加喜欢你学生更加幽默让学生更加喜欢你学生更加......</view>
						<view class="text_3">
							<view class="" style="position: relative;bottom: -10px;">
								<text>451</text> <text style='font-weight: 600; color: black;'>人已预约</text>
							</view>
							<image @click="submit(item,current)" :src="current==0?src:src1" />
						</view>
					</view>
				</view>
				<view class="xian">

				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					type: 1,
					page: 1
				},
				current1: 0,
				info: {},
				src: require('@/static/img/4804.png'),
				src1: require('@/static/img/4805.png'),
				current: 0
			};
		},
		computed: {
			list() {
				let a = [{
					name: '直播预告'
				}, {
					name:this.info.list.total&&this.current==1? '往期直播(' + this.info.list.total + ')':'往期直播'
				}]
				return a
			},
			time() {
				if (this.info.today) {
					return this.info.today.filter((v, index) => {
						return index == this.current1
					})[0]
				}
			},
		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			//轮播图的切换事件
			swiperChange(e) {
				this.current1 = e.target.current
			},
			getinfo() {
				this.$api('broadcast/index', this.form).then(res => {
					this.info = res.data
					console.log(this.info.today)
				})
			},
			submit(item) {
				uni.navigateTo({
					url: `/pages/previewdetails/lookback?cur_id=${item.cur_id}`
				});
			

			},
			change(index) {
				this.current = index;
				let a = index + 1
				if (a == 2) {
					this.form.type = 3
				} else {
					this.form.type = index * 1 + 1
				}
				this.getinfo()
			}
		},
		onPullDownRefresh() {
			this.form.type++,
				this.getinfo()
		},
	}
</script>

<style lang="scss">
	.xian2 {
		height: 1rpx;
		background: #EFEFEF;
		margin-top: 25rpx;
		margin-bottom: 25rpx;
		opacity: 1;
	}

	.xian {
		height: 1px;
		background: #EFEFEF;
		margin-top: 25rpx;
		opacity: 1;
		border-radius: 0px;
	}

	.two {
		.utabs {
			border-bottom: 1rpx solid #E3E3E3;
		}
	}

	.body {
		// margin-top: 30rpx;
		display: flex;

		.text {
			margin-left: 15rpx;
			width: 60%;
			position: relative;

			.text_1 {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 33rpx;
				color: #131314;
				opacity: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.text_2 {
				width: 90%;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 30px;
				color: #91969A;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

			}

			.text_3 {
				display: flex;
				justify-content: space-between;
				position: absolute;
				bottom: 0;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #131314;
				opacity: 1;
				width: 100%;

				image {
					width: 140rpx;

					height: 58rpx;
				}

				text {
					color: rgb(255, 64, 64);
				}
			}

		}
	}

	.imgall {
		width: 240rpx;
		height: 160rpx;
	}

	.all {
		padding: 10rpx 30rpx 30rpx 30rpx;
	}

	.top {
		.top-text {
			font-size: 35rpx;
			font-family: HarmonyOS Sans;
			display: inline-block;
			margin-bottom: 20rpx;
			font-weight: 600;
			color: #131314;
			opacity: 1;
		}
	}

	::v-deep .u-tab-bar {
		background-color: #FFD500 !important;
		// width: 40px !important ;
	}
</style>
